<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }
  .divideline {
    background: #eee;
    height: 4px;
  }
  .banlance {
    background: #fff;
    padding: 10px 15px;
  }
  .banlance h2 {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
  }
  .cashbox p {
    border: 1px solid #ccc;
    display: inline-block;
    margin: 3px;
    padding: 5px 10px;
  }
  .cashbox p input {
    border: 0;
  }
  .cashbox p.active {
    border-color: #1aad19;
  }
  .recharge {height: 100%; background: #eee;}

  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell span i {
    color: red;
    font-size: 30px;
    font-style: normal;
  }
  .paylayer .rj-cell {
    padding: 5px;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
    text-align: left;
  }
  .weui-panel {
    margin-top: 0;
  }
  .all-btn i {
    font-size: 16px;
    position: absolute;
    left: -7px;
    top: 8px;
  }
  .weui-cell:before {
    border-top: 0;
  }
  .weui-select {
    font-size: 14px;
    color: #333;
  }
  .weui-cell__hd {
    font-size: 14px;
    color: #333;
    padding: 5px 15px;
  }
  .weui-textarea {
    font-size: 14px;
  }


  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
  .weui-cell.fir {
    border-top: 0;
  }
  .help {
    text-align: right;
    padding: 5px;
    font-size: 12px;
    color: #bbb;
  }
  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }
  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }
  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }
  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
    display: inline-block;
  }
</style>
<template>
  <div class="recharge">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{title}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">部门：</label></div>
            <div class="weui-cell__bd" style="display: inline-block;z-index: 0;">
              <input type="hidden" name="departname" v-model="depart.name" />
              <input type="hidden" name="departid" v-model="depart.guid" />
              <select class="weui-select" v-model="depart">
                <option value="">请选择部门</option>
                <option selected=""  v-for="(item, index) in departments" :key="item.guid" :value="item">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="rj-cell max">
            <label>客户：</label>
            <span>{{customer.name}}</span>
          </div>
          <div class="rj-cell max">
            <label>地址：</label>
            <span>{{customer.province + customer.city + customer.district}} {{customer.address}}</span>
          </div>
          <div class="rj-cell">
            <label>余额：</label>
            <span style="margin-right: 20px;">
              <span style="color: red;">{{attachUnit2(customer.prebalance, '')}}</span>
              元
            </span>
            <label>货币预收款余额：</label>
            <span>
              <span style="color: red;">{{attachUnit2(customer.currPrebalance, ' ')}}</span>元
            </span>
          </div>
          <div class="rj-cell">
            <label>非货币预收款余额：</label>
            <span>
              <span style="color: red;">{{attachUnit2(customer.nocurrPrebalance, ' ')}}</span>元
            </span>
          </div>
        </div>
        <div class="divideline"></div>
        <div class="banlance">
          <h2>充值金额</h2>
          <div class="cashbox">
<!--            <p :class="{active: amount == 10000}" @click="setAmount(10000)">10000元</p>-->
<!--            <p :class="{active: amount == 50000}" @click="setAmount(50000)">50000元</p>-->
<!--            <p :class="{active: amount == 100000}" @click="setAmount(100000)">100000元</p>-->
<!--            <p><input type="number" name="amount" placeholder="自定义金额" v-model="amount"></p>-->
            <div class="weui-cell" style="border: 0.5px solid #ccc;">
              <div class="weui-cell__bd">
                <input class="weui-input" type="number" name="name" placeholder="请输入充值金额" v-model="amount">
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell" style="background: #fff;">
          <div class="weui-cell__bd">
            <textarea class="weui-textarea" name="remark" v-model="opinion" placeholder="请输入备注内容" rows="3"></textarea>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label" style="width: 70px;">附件上传</label></div>
          <div class="weui-cell__ft">
            <div class="weui_uploader_bd">
              <ul class="weui_uploader_files"></ul>
              <div class="weui_uploader_input_wrp inrow">
                <UploadFile3 class="weui_uploader_input" v-on:pushfile="setFile"></UploadFile3>
              </div>
            </div>
          </div>
          <ul class="weui-uploader_files" id="images" style="margin-left: 5px;">
            <li class="weui-uploader_file" v-for="(fil, index) in filenames" @click=delFile(fil,fileids[index])>
              {{fil}}
            </li>
          </ul>
        </div>

      </div>
    </div>
    <div class="catbtn">
      <div class="demos-content-padded">
        <a href="javascript:;" class="weui-btn weui-btn_primary subbtn" @click="send">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk';
  import UploadFile3 from "../../common/UploadFile3";

  export default {
    name: 'Recharge2',
    components: {UploadFile3},
    data () {
      return {
        id: '',
        type: '',
        customer: '',
        amount: '',
        opinion: '',
        departments: [],
        depart: "",
        images: {
          serverId: [],
          srcStr: [],
        },
        filenames: [],
        fileids: [],
      }
    },
    created() {

    },
    mounted () {
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
      this.getCustomer(this.id);
      this.getDepartment();
    },
    computed: {
      title: function () {
        let txt = '';
        switch (this.type) {
          case 1:
            txt = '预收款货币充值';
            break;
          case 2:
            txt = '预收款非货币充值';
            break;
        }
        return txt;
      }
    },
    methods: {
      delFile: function (name, id) {
        let that = this;
        $.confirm('确定要删除？', function () {
          that.axios({
            method: 'post',
            url: '/prod-api/common/delete',
            params: {id: id}
          })
          that.fileids = that.fileids.filter(item => {
            return item != id;
          })
          that.filenames = that.filenames.filter(item => {
            return item != name;
          })
        })
      },
      setFile: function (file) {
        this.filenames.push(file.name);
        this.fileids.push(file.id);
      },
      getDepartment: function() {
        let that = this;
        this.axios({
          method: 'get',
          url: '/prod-api/organization/department/findDepartment',
          params: {permission: 2}
        }).then(response => {
          if (response.data.code == 200) {
            that.departments = response.data.data;
            that.depart = response.data.data.length > 0 ? response.data.data[0] : '';
          } else if (response.data.msg) {
            this.toastText(response.data.msg);
          }  else {
            this.toastText('获取部门数据失败');
          }
        });
      },
      getCustomer: function (id) {
        let that = this;
        this.axios({
          method: 'get',
          url: '/prod-api/customer/customer/detail',
          params: {id: id}
        }).then(response => {
          if (response.data.code == 200) {
            this.customer = response.data.data || {};
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      setAmount: function (amount) {
        this.$nextTick(() => {
          this.amount = amount;
        })
      },
      send: function () {
        let that = this;

        if (!this.depart) {
          this.toastText('请选择部门！');
          return false;
        } else if (!this.amount) {
          this.toastText('请输入充值金额！');
          return false;
        } else if (this.filenames.length == 0) {
          this.toastText('单据不能为空！');
          return false;
        }

        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        let postData =  {
          'type': this.type,
          'guid': this.id,
          'departid': this.depart.guid,
          'departname': this.depart.name,
          'customerid': this.customer.guid,
          'customer': this.customer.name,
          'amount': this.amount,
          'remark': this.opinion
        }
        postData.fileIds = this.fileids.join(',');
        this.axios({
          method: 'post',
          url: `/prod-api/bill/recharge/save?fileIds=${postData.fileIds}&opinion=${this.opinion}`,
          data: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if(response.data.code == 200){
            this.toastText('操作成功!');
            // this.$router.push({name: 'ViewCustomer2', query: {id: this.id}});
            this.$router.push({name: 'RechargeList2'});
          }else if (response.data.msg == 'canotRecharge'){
            if (this.type == 1) {
              this.toastText('货币预收款余额不能为负数!');
            } else if (this.type == 2) {
              this.toastText('非货币预收款余额不能为负数!');
            }
          }else if (response.data.msg == 'canotopt'){
            this.toastText('不允许的操作!');
          } else if (response.data.msg){
              this.toastText(response.data.msg);
            }else {
            this.toastError('系统错误!');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      }
    }
  }
</script>
